/*
 * @Description: 市民金融列表组件
 * @Author: zhenqiang.hong
 * @Date: 2020-07-14 11:44:14
 * @Last Modified by: zhenqiang.hong
 * @Last Modified time: 2020-07-14 18:25:52
 */
<template>
  <div id="app">
    <!-- 银行列表 -->
    <ul class="bank-list-wrapper flex-v">
      <li
        class="bank-item-wrapper flex-h"
        :class="index!==0?'item-border':''"
        v-for="(item, index) in bankList"
        :key="index"
        @click="bankEvent(item.bankId)"
      >
        <img
          class="bank-img"
          :src="item.logo"
        />
        <div class="flex-v bank-info-wrapper">
          <div class="flex-h  flex-vc flex-hsb fontsize32">
            <p class="bank-name ">{{item.name}}</p>
            <i class="icon iconfont icon-rightangel"></i>
          </div>
          <div class="bank-desc fontsize24">{{item.desc}}</div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { getFinanceList, getFinanceCCB } from './api/api'
export default {
  components: {

  },
  data() {
    return {
      bankList: [
        //   {
        //   logo: require('./assets/ccb.png'),
        //   name: '中国建设银行',
        //   desc: '主要办理信贷资金贷款、居民储蓄款、外汇业务信用卡业务等'
        // }, {
        //   logo: require('./assets/ccb.png'),
        //   name: '江南农村商业银行',
        //   desc: '主要办理信贷资金贷款、居民储蓄款、外汇业务、信用卡业务主要办理信贷资金贷款、居民储蓄款、外汇业务、信用卡业务信用卡业务主要务、信用卡业务信用、信用卡业务信用'
        // }
      ]
    }
  },
  mounted() {
    getFinanceList().then(res => {
      // console.log(res)
      this.bankList = res
    }).catch(err => {
      console.log(err)
    })
  },
  methods: {
    bankEvent(bankId) {
      switch (bankId) {
        case 'ccb':// ccb-中国建设银行
          getFinanceCCB().then(res => {
            if (window.x_thirdparty && window.x_thirdparty.startBankSDK) {
              window.x_thirdparty.startBankSDK(
                () => { }, // successCallback
                () => { }, // failureCallback
                bankId, // 银行类型Id
                res.SDK_AUTH// SDK授权签名
              )
            }
          }).catch(err => {
            console.log(err)
          })
          break
        case 'jnbank':// jnbank-江南农村商业银行
          this.$toastMsg('功能正在开发中，敬请期待...')
          break
        default:
          this.$toastMsg('功能正在开发中，敬请期待...')
          break
      }
    }
  }
}
</script>

<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
  background-color: #f2f5f6;
}
.bank-list-wrapper {
  width: calc(100%-64px);
  padding: 0 32px;
  background: #fff;
  /* height: 100%; */
}
.bank-item-wrapper {
  padding: 20px 0 32px 0;
}
.bank-info-wrapper {
  width: 582px;
}
.item-border {
  border-top: 2px solid #eeeeee;
}
.bank-img {
  width: 80px;
  height: 80px;
  margin-right: 24px;
}
.bank-name {
  color: #333;
}
.icon-rightangel {
  color: #999;
}
.bank-desc {
  color: #999;
  margin-top: 16px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  overflow: hidden;
  -webkit-line-clamp: 3;
}
</style>
